/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import moment from 'moment';
import { Grid, Table } from '@alifd/next';
import styles from './styles/styles';

const { Row, Col } = Grid;
const attr = {
  id: 'ID',
  name: '名称',
  code: '编码',
  physicalConnType: '网关类型',
  config: '配置信息',
  createTime: '创建日期',
  connectRetry: '最大连接次数',
  connectTimeout: '连接超时',
  workMode: '工作模式',
  disabled:'状态',
  batched: '批处理',
}

export default class GatewayInfo extends Component {
  static displayName = 'GatewayInfo';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      info: [],
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      info: Object.entries(nextProps.info).map(entry=>{return {name: entry[0], value: entry[1]};})
    })    
  }

  renderAttrLabel(value, index, item) {
    return (
      <span style={{fontWeight: '800'}}>{ attr[item.name] }</span>
    )
  }

  renderAttrValue(value, index, item) {
    let block = <span>{item.value}</span>;
    switch(item.name) {
      case 'config': {
        if(!!item.value) {
          let obj = JSON.parse(item.value);
          block = (
            <div>
              {Object.keys(obj).map(function (k) {
                return (
                  <dl style={styles.horizontal.dl} key={k}>
                    <dt style={styles.horizontal.dt}>{k}</dt>
                    <dd style={styles.horizontal.dd}>{obj[k]}</dd>
                  </dl>
                );
              })}
            </div>
          );
        }
      }  break;
      case 'name': {
        block = <Link to={"/manage/lowermachine/" + this.props.info.code + '/operation' }>{item.value}</Link>
      } break;
      case 'disabled': {
        block = <span>{item.value ? '停止' : '开启'}</span>;
      } break;
      case 'createTime': {
        block = <span>{moment(item.value).format('YYYY-MM-DD HH:mm:ss')}</span>;
      } break;
      case 'connectRetry': {
        block = <span>{item.value} 次</span>;
      } break;
      case 'connectTimeout': {
        block = <span>{item.value} 秒</span>;
      } break;
      case 'workMode': {
        block = <span>{item.value === 'PULL' ? '主动' : '被动'}</span>;
      } break;
      case 'batched': {
        block = <span>{item.value ? '是' : '否'}</span>;
      } break;
      default: break;
    }
    return block;
  }



  render() {
    return (
      <div style={styles.infoColumn}>
        <h5 style={styles.infoColumnTitle}>网关信息</h5>
        <Table dataSource={this.state.info} hasHeader={false} hasBorder={false}>
          <Table.Column width={110} cell={this.renderAttrLabel}/>
          <Table.Column cell={ this.renderAttrValue.bind(this) } />
        </Table>
      </div>
    );
  }
}
